<script setup>
import { ref, inject } from 'vue'
import { Vue3Lottie } from 'vue3-lottie'
import { useUserStore } from '@/stores'
import { addOrDelFeedbackAPI } from '@/api/leaveword.js'
import { message } from '@/components/ZyMessage/index.js'
import loading_circle from '@/assets/json/loading_circle.json'
import errImg from '@/assets/images/image-failed.svg'

const userStore = useUserStore()
const refreshLike = inject('refreshLike') // 刷新喜欢状态&数量

defineProps({ list: { type: Object, default: [] }, isEmpty: Boolean })
const emit = defineEmits(['preview'])

// 点击查看详情
const onPreview = (index) => {
  emit('preview', index)
}

// 照片的宽度
const imgWidth = ref(0)
const setWidth = () => {
  const cWidth = document.body.clientWidth || document.documentElement.clientWidth
  // 照片宽度=屏幕可视区域宽度-左右边距-照片间距
  imgWidth.value = Math.floor((cWidth - 240 - 20) / 5)
}
setWidth()

// 喜欢或取消喜欢
const loading = ref(false)
const onClikeLike = async (id) => {
  if (!userStore.user.id) return message('请先登录!', 'warning')
  loading.value = true
  try {
    await addOrDelFeedbackAPI({ leaveword_id: id, type: 1 })
    // 刷新喜欢状态
    refreshLike(id)
  } finally {
    loading.value = false
  }
}

// 图片加载失败
const onImgError = (event) => {
  const img = event.srcElement
  img.style.height = '200px'
  img.style.background = `#ebebeb url('${errImg}') no-repeat center / contain`
  img.onerror = null //防止闪图
}
</script>

<template>
  <div class="image-wall" v-masonry :gutter="5" :style="{ height: list.length === 0 && 'auto' }">
    <div
      class="item"
      v-masonry-tile
      v-for="(item, index) in list"
      :key="item.id"
      @click="onPreview(index)"
      :style="{ width: `${imgWidth}px` }"
    >
      <img class="image" :src="item.img_url" alt="" :onerror="onImgError" />
      <div class="mask">
        <!-- 喜欢 -->
        <div class="like">
          <Vue3Lottie
            class="like-icon"
            v-if="loading"
            :animationData="loading_circle"
            :height="16"
            :width="16"
            @click.stop=""
          />
          <svg-icon
            class="like-icon"
            v-else
            icon-name="aixin"
            :class="{ 'like-active': item.is_like }"
            @click.stop="onClikeLike(item.id)"
          ></svg-icon>
          <div class="value">{{ item.like_count }}</div>
        </div>
      </div>
    </div>
    <!-- 空状态 -->
    <div class="empty" v-if="isEmpty">
      <img src="@/assets/images/add-image.svg" />
      <p>还没有留言，快贴上第一张吧！</p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.image-wall {
  margin: 0 120px;
  min-height: 252px;
  transition: var(--tr);
  .item {
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 5px;
    position: relative;
    cursor: pointer;
    &:hover .mask {
      opacity: 1;
    }
    .image {
      width: 100%;
    }
  }
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: var(--tr);
  .like {
    position: absolute;
    top: 8px;
    left: 8px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    height: 28px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    backdrop-filter: blur(10px);
    .like-icon {
      color: #949494;
      padding-right: 4px;
      transition: var(--tr);
      &:hover {
        color: var(--like-color);
      }
    }
    .like-active {
      color: var(--like-color);
    }

    .value {
      color: #202020;
    }
  }
}
.empty {
  margin: 50px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  img {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
  }
  p {
    font-weight: 700;
    font-size: 16px;
    color: var(--gray-text-2);
  }
}
</style>
